z<template>
  <div id="app">
	  <div>
	 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
	   <el-menu-item index="1" @click="com='Show'">查看信息</el-menu-item>
	   <el-menu-item index="2" @click="com='Make'">处理学生</el-menu-item>
	 </el-menu>
	 </div>
	<component 
	:is="com"
	:stu ="stu" 
	:stu1="stu1" 
	@transobj="add" 
	@delobj="del" 
	 @toupdate="toUpdate"
	  @update="stu1=null">
	  </component>
  </div>
</template>

<script>
import Make from "./components/Make.vue"
import Show from "./components/Show.vue"
export default {
	name: 'app',
	components: {
			Make,
			Show
	},
    data:function() {
      return {
		activeIndex: '1',
		activeIndex2: '1',
		com:"Show",
		stu:[{id:1,name:"aa",age:12,sex:"男"}],
		stu1:null
      };
    },
    methods: {
		handleSelect(key, keyPath) {
		console.log(key, keyPath);
		},
	  add(obj){
	  this.stu.push(obj);
	  },
	  del(index){
	  	this.stu.splice(index,1)
	  },
	  toUpdate(index){
	  	this.stu1=this.stu[index];
	  	this.com="Make";
	  }
    }
  };
</script>

<style>
table{
				border-collapse: collapse;
				width: 50%;
			}
			.form,table{
				width: 50%;
				margin: 0 auto;
			}
			tr,td,th{
				border:1px solid black;
				text-align: center;
			}
			tr:nth-of-type(even){
				background-color: aquamarine;
			}
			tr:nth-of-type(odd){
				background-color: cornflowerblue;
			}
			tr:hover{
				background-color: azure;
			}
			.selected{
				background-color: lightpink !important;
			}
</style>
